import React, { Component } from "react";

export default class App extends Component {
  a = 100;
  render() {
    return (
      <div>
        <h2>06</h2>
        <input type="text" placeholder="输入代办事项" />
        {/* 逻辑过多，不推荐这种写法 */}
        <button
          onClick={() => {
            console.log("添加代办事项1", this.a);
          }}
        >
          Add1
        </button>
        {/* 不推荐 */}
        <button onClick={this.handleClick2}>Add2</button>
        {/* 修正this 丢失 */}
        <button onClick={this.handleClick2.bind(this)}>Add2-1</button>
        {/* 推荐 */}
        <button onClick={this.handleClick3}>Add3</button>
        <button onClick={this.handleClick3}>Add3-evt</button>
        {/* 比较推荐，传参很好用 */}
        <button onClick={() => this.handleClick4(11)}>Add3</button>
      </div>
    );
  }

  handleClick2() {
    console.log("添加代办事项2", this.a);
  }

  handleClick3 = (evt) => {
    console.log("添加代办事项3", this.a, evt);
  };

  handleClick4 = (b) => {
    console.log("添加代办事项4", this.a, b);
  };
}
/**
 * react 并不会绑定事件到每一个具体的dom元素上，而是采用事件代理模式
 *
 * 事件冒泡，绑定在根节点上
 * 不需要解绑
 */

/**
 * 改变this指向三种方式
 * call 改变this指向，自动执行函数，后面参数是参数列表
 * apply 改变this指向，自动执行函数，后面参数是参数数组
 * bind 只改变this指向，不自动执行，需手动执行
 *
 *
 * apply接受两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入，
 * 且当第一个参数为null、undefined的时候，默认指向window(在浏览器中)，
 * 使用apply方法改变this指向后原函数会立即执行，且此方法只是临时改变thi指向一次。
 *
 * call方法的第一个参数也是this的指向，后面传入的是一个参数列表（注意和apply传参的区别）。当一个参数为null或undefined的时候，表示指向window（在浏览器中），和apply一样，call也只是临时改变一次this指向，并立即执行。
 */
const obj1 = {
  name: "obj1",
  getName() {
    return this.name;
  },
};

const obj2 = {
  name: "obj2",
  getName() {
    return this.name;
  },
};
console.log(obj1.getName());
console.log(obj2.getName());

console.log("call", obj1.getName.call(obj2));
console.log("apply", obj1.getName.apply(obj2));
console.log("bind", obj1.getName.bind(obj2)());
